<template>
  <div>
    <div class="viewStu">
      <DataGrid style="height:560px"
                :pagination="true"
                :data="data"
                :total="total"
                :pageSize="pageSize"
                :pagePosition="pagePosition" >
        <GridColumn field="studentNumb" title="序号"></GridColumn>
        <GridColumn field="studentName" title="学生姓名"></GridColumn>
        <GridColumn field="studentSex" title="性别"></GridColumn>
        <GridColumn field="studentIDNumb" title="身份证号"></GridColumn>
        <GridColumn field="choiceSchool" title="学校"></GridColumn>
      </DataGrid>
    </div>

    <div class="select-path">
          <download-excel
            @click="fileName"
            :data = "data"
            :fields = "json_fields"
            name = "file.xls">
            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
             <!--<button class = "selpath" id="file" @click="setFileName($event)">选择路径</button>-->
            <input class="selpath" type="button" id="file" @click="setFileName($event)" value="导出"></input>
          </download-excel>
    </div>

  </div>
</template>

<script>
    export default {
      name:"MainContent",
        data() {
            return {
                total: 10000,
                pageSize: 20,
                data: [],
                pagePosition: "bottom",
                pageOptions: [
                    {value: "bottom", text: "Bottom"},
                    {value: "top", text: "Top"},
                    {value: "both", text: "Both"}
                ],

                json_fields: {
                    "序号":"studentNumb",
                    "学生姓名": "studentName",
                    "性别": "studentSex",
                    "身份证号": "studentIDNumb",
                    "学校": "choiceSchool",
                },
                json_meta: [
                    [
                        {
                            " key ": " charset ",
                            " value ": " utf- 8 "
                        }
                    ]
                ],
                fileName:''
            };
        },
        created() {
          this.axios({
            headers:{'Content-Type': 'application/json;charset=UTF-8'},
            method:"post",
            url:'http://localhost:9090/outputExcel',
          }).then(res=>{
            console.log(res.data);
            this.data = res.data;
          })
        },
        methods:{
            setFileName:function(e){
              this.axios({
                headers:{'Content-Type': 'application/json;charset=UTF-8'},
                method:"post",
                url:'http://localhost:9090/clean',
              })
            }
        }
    }
</script>

<style scoped>

  .selpath{
    font-family: 'Times New Roman', serif;
    background-color: #e4edee;
    border: 2px solid #447fbc;
    border-radius: 8px;
    margin-top: 5px;
    height: 30px;
    width: 70px;

  }
  /* 悬停按钮 */
  .selpath {
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }

  .selpath:hover {
    background-color: #7cbbd9;
    color: white;
  }
</style>
